<template>
<view class="content">
		<scroll-view class="itembox" scroll-y="true">
			<view v-for="(item, index) in lists" :key="index" class="topic-art">
				<view class="topic">第{{ index + 1 }}题</view>
				<view class="completion"><text>|</text>{{item.question_type_name}}</view>
				<view class="long-line"></view>
				<view class="first-title-content"><rich-text :nodes="item.question_title"></rich-text></view>
				<view class="analysis_text" v-if="item.is_one_choice == 2 || item.is_many_choice == 2" v-for="(val,id) in item.answer_list" :key="id">
					<view>{{val.lettertext+'、'}}</view>
					<rich-text :nodes="val.answer"></rich-text>
				</view>	
				<view class="container-flex-row answer2" v-if="item.answer">
					<view style="flex: none;">正确答案：</view>
					<block>
						<view><rich-text :nodes="item.answer"></rich-text></view>
					</block>
				</view>
				<view class="container-flex-row first-title-content answer1" v-if="item.answer">
					<view style="flex: none;">学生答案：</view>
					<!-- 定制填空题的答案放在第二数组，因此需要判断要确保有这个answer_list -->
					<view v-if="item.question_typeid == 11&&item.myanswer">
						<image class="yulanImg" :src="'data:image/jpeg;base64,'+item.myanswer" :style="{background:'url('+item.question_photo+') no-repeat'}"></image>
					</view>
					<view v-else-if="item.answer_img_list">
						<view class="answerimage">
							<view
								@click="previewImage(imgitem,item.answer_img_list)"
								class="right_img"
								v-for="(imgitem, imgindex) in item.answer_img_list"
								:key="imgindex"
								:style="{ backgroundImage: 'url('+imgitem+')' }"
							></view>
						</view>
					</view>
					<view v-else>{{ item.myanswer == '' ? '没答题' : item.myanswer }}</view>
				</view>
				
				<view class="title-flex">
					<text></text>
					<view class="first-title">题目解析</view>
				</view>
				<view class="first-title-content analysis"><rich-text :nodes="item.question_analysis"></rich-text></view>
				<view class="title-flex">
					<text></text>
					<view class="first-title">知识点</view>
				</view>
				<view class="first-title-content analysis" v-if="item.section_data.section_name">{{item.section_data.f_section_name+''+item.section_data.section_name}}</view>
				<view class="first-title-content analysis" v-else>无</view>
				
				<view v-if="item.is_sub_question == 2" class="checkSub" @click="checkSub(index)">查看子题</view>
				<!-- <view class="grey-bg"></view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				student_id: uni.getStorageSync("currentChild").student_id,
				lists: [],
				class_log_id: '',
				is_exam_type: 1,
				dislog: false,
				pagetype:''
			}
		},
		onLoad(e) {
			this.class_log_id = e.class_log_id;
			this.is_exam_type = e.is_exam_type;
			this.pagetype=e.pagetype;
			let data = {
				class_log_id: this.class_log_id,
				is_out_html: 1,
				student_id: this.student_id
			}
			var url="";
			var title="";
			//作业错误解析
			if(this.is_exam_type == 1 && this.pagetype=='error'){
				url="user/Grade.Stuhomework/homeworkErrorAnalysis";
				title="错题解析";
			}
			//作业全部解析
			if(this.is_exam_type == 1 && this.pagetype=='correct'){
				url="user/Grade.Stuhomework/homeworkAnalysis";
				title="试题解析";
			}
			//测验错误解析
			if(this.is_exam_type == 2 && this.pagetype=='error'){
				url="user/Grade.Stuexam/ExamErrorAnalysis";
				title="错题解析";
			}
			//测验全部解析
			if(this.is_exam_type == 2 && this.pagetype=='correct'){
				url="user/Grade.Stuexam/ExamAnalysis";
				title="试题解析";
			}
			uni.setNavigationBarTitle({
				title:title
			})

			this.$zapi.apiPost(url, data).then(res => {
					if(res.data.code == 200){
						var data = res.data.data.question_lists;
						util.latex_reques(data,'question_title');//解析 试题标题 latex 公式转换
						util.latex_reques(data,'question_analysis');//解析 试题解析 latex 公式转换
						util.latex_answer(data,'answer_list');//解析答案选项 latex 公式转换
						this.lists = util.getAnalysis(data,'exam_answer_log');
						this.$forceUpdate();
					}
				});

		},
		methods: {
			checkSub(index) {
				uni.navigateTo({
					url: 'allDetail?class_log_id=' + this.class_log_id + '&is_exam_type=' + this.is_exam_type + '&index=' + index+'&student_id='+this.student_id+'&pagetype='+this.pagetype
				})
			}
		}
	}
</script>

<style lang="stylus">
html {
	font-size: 26upx;
}
.content /deep/ img {
	width 100%;
	height 100%;
}
.img {
	display: block;
	max-width: 90%;
	margin: auto;
}
.content {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #FAFAFA;
}

.itembox {
	height: 100%;
	background-color: #FAFAFA;
}
.topic-art{
	background-color: #FFFFFF;
	margin-bottom: 10upx;
	padding-bottom 20upx
}
.topic-art:last-child{
	margin-bottom: 0;
	// padding-bottom: 70%;
}

.completion {
	text-align: left;
	color: #999999;
	font-size: 36upx;
	display: inline-block;
}
.completion text{
	margin-right: 10upx;
}

.long-line {
	width: 750upx;
	border-top: 1upx solid #e5e5e5;
}

.long-line2 {
	width: 710upx;
	border-top: 1upx solid #e5e5e5;
	margin: 10upx auto;
}

.title-flex {
	width: 750upx;
	height: 52upx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 20upx;
}

.title-flex text{
	width: 36upx;
	height: 36upx;
	background-color: #00D5A2;
	border-radius:0px 10px 10px 0px;
	margin-right: 16upx;
}

.title-bg {
	width: 142upx;
	height: 52upx;
}

.first-title {
	color: #333333;
	font-size: 36upx;
	font-weight: bold;
}

.topic{
	color: #FF9900;
	font-size: 36upx;
	font-weight: bold;
	margin: 20upx 10upx 30upx 30upx;
	display: inline-block;
}

.small-title {
	font-size: 24upx;
	margin-top: 2upx;
}

.blue {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 173, 255, 0.4);
}

.orange {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(255, 144, 0, 0.4);
}

.red {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(241, 0, 0, 0.4);
}

.lanse {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 92, 220, 0.4);
}

.favorite {
	color: #666666;
    /* display: inline-block; */
	position: absolute;
    right: 30upx;
    line-height: 18upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: -70upx;
}

.favorite i {
	font-size: 45upx;
	text-align: center;
	/* margin-right: 10upx; */
}
.container-flex-row {
	display: flex;
	flex-direction: row;
}

.item1 {
	color: #666666;
	align-items: center;
	margin-bottom: 10upx;
}

.first-title-content {
	font-size: 36upx;
	color: #333333;
	margin: 0 25upx;
}
.analysis_text{
	font-size: 32upx;
	color: #333333;
	margin-left: 25upx;
	display flex
	flex-direction row
}
.space {
	margin-top: 14upx;
}

.answer1 {
	color: #666666;
	margin-top: 14upx;
}

.answer2 {
	color: #00D5A2;
	margin-left: 25upx;
}

	.answer2 /deep/ img,.answer1 /deep/ img {
		width 96%;
	}
.answer1 view,
.answer2 view{
	font-size: 34upx;
}

.analysis {
	color: #666666;
	font-size: 34uox;
	margin: 14upx 25upx;
	line-height: 1.5;
}

.knowledge {
	color: #666666;
	margin-bottom: 10upx;
}

.know2 {
	margin-left: 52upx;
}

.grey-bg {
	border-bottom: 10upx solid #FAFAFA;
}
.dati-item {
	margin-left: 20upx;
}
/* 底部 */
.bottom{
	position: fixed;
	bottom: 0;
	width: 100%;
}
.footer{
	height: 48upx;
	width: 100%;
	background: #F7F7F7;
	border-radius:20px 20px 0px 0px;
}
.footer image{
	width: 68upx;
	height: 16upx;
	margin-left: 341upx;
	margin-top: 16upx;
}

/* 弹窗 */
.problue_result{
	width: 710upx;
	padding: 40upx 20upx 60upx;
	background: #FFFFFF;
}
.prores_type_cont{
	height: auto;
}
.prores_type_title{
	text-align: center;
}
.result_list{
	display: flex;
	flex-wrap: wrap;
}

.yulanImg{
	width:550upx;
	background-size: 100% 100% !important;
}
	.answer_content {
		width: 75%;
		word-break: break-all;
		font-size: 32upx;
	}
	
	.answerimage {
		width:550upx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		
	}
	.right_img {
		position: relative;
		width: 25%;
		height: 0;
		overflow: hidden;
		margin: 0;
		margin-top: 15upx;
		margin-right: 15upx;
		padding-bottom: 150upx; /* 关键就在这里 */
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.checkSub {
		font-size: 34upx;
		color: #00D5A2;
		margin: 40upx 30upx 0;
		padding-bottom: 20upx;
		text-align: right;
		font-weight: bold;
	}
</style>
